<template>
  <div class="container">
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" :model="flowModelForm" class="demo-form-inline">
          <el-form-item label="卡组">
            <el-select v-model="flowModelForm.region" placeholder="活动区域">
              <el-option label="ZAPP" value="shanghai"></el-option>
              <el-option label="OF" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="钱包">
            <el-select v-model="flowModelForm.region" placeholder="活动区域">
              <el-option label="HK" value="shanghai"></el-option>
              <el-option label="CN" value="beijing"></el-option>
              <el-option label="GCash" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="环境">
            <el-select v-model="flowModelForm.region" placeholder="活动区域">
              <el-option label="HK联调" value="shanghai"></el-option>
              <el-option label="HK联调" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="confirmFlowModel">确认</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16">
        <!-- 流程容器 -->
        <div class="flow-container" ref="flowcontainer">
          <!-- 左侧面板 -->
          <!-- <NodePanel v-if="lf" :lf="lf" ></NodePanel> -->
        </div>
      </el-col>
      <el-col :span="8">
        条件
      </el-col>
    </el-row>

  </div>

</template>

<script>
import LogicFlow from "@logicflow/core";
import { DynamicGroup, DndPanel, SelectionSelect } from '@logicflow/extension';
import "@logicflow/core/lib/style/index.css";
import '@logicflow/extension/lib/style/index.css'
import NodePanel from './flow/NodePanel.vue';
LogicFlow.use(DndPanel);
LogicFlow.use(SelectionSelect);
export default {
  name: "Index",
  components: {
    NodePanel
  },
  data() {
    return {
      flowModelForm: {
      },
      lf: null,
      renderData: {
        // 节点数据
        nodes: [
          {
            id: '21', // 节点ID，需要全局唯一，不传入内部会自动生成一个ID
            type: 'rect', // 节点类型，可以传入LogicFlow内置的7种节点类型，也可以注册自定义节点后传入自定义类型
            x: 200, // 节点形状中心在x轴位置
            y: 100, // 节点形状中心在y轴的位置
            text: 'Origin Usage-rect', // 节点文本
            properties: { // 自定义属性，用于存储需要这个节点携带的信息，可以传入宽高以重设节点的宽高
              width: 160,
              height: 80,
            }
          },
          {
            id: '50',
            type: 'circle',
            x: 300,
            y: 300,
            text: 'Origin Usage-circle',
            properties: {
              r: 60,
            }
          },
        ],
        // 边数据
        edges: [
          {
            id: 'rect-2-circle', // 边ID，性质与节点ID一样
            type: 'polyline', // 边类型
            sourceNodeId: '50', // 起始节点Id
            targetNodeId: '21', // 目标节点Id
          },
        ],
      }
    }
  },
  methods: {
    confirmFlowModel() {
      console.log('Flow Model Form Submitted:', this.flowModelForm);
    }
  },
  mounted() {
    
    const lf = new LogicFlow({
      container: this.$refs.flowcontainer,
      grid: true,
      plugins: [DynamicGroup],
    });
    this.lf = lf;
    
    this.lf.extension.dndPanel.setPatternItems([
      {
        type: 'circle',
        text: '开始',
        label: '开始节点',
      },
      {
        type: 'rect',
        label: '用户任务',
        icon: '',
        className: 'important-node'
      },
      {
        type: 'rect',
        label: '系统任务',
        icon: '',
        className: 'import_icon'
      },
      {
        type: 'diamond',
        label: '条件判断',
        icon: '',
      },
      {
        type: 'circle',
        text: '结束',
        label: '结束节点',
        icon: '',
      }
    ]);
    this.lf.render(this.renderData);
  },
}
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
}

.flow-container {
  width: 100%;
  height: 600px;
  border: 1px solid #dcdfe6;
}
</style>
